<script setup>
import Bread from '@/components/Bread.vue';
import SubCategoryTabs from './components/SubCategoryTabs.vue';

import { getCategoryFilterAPI } from '@/apis/category';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { nanoid } from 'nanoid'

const route = useRoute();
const categoryData = ref([]);
const breadList = ref([]);
const getCategoryFilter = async (id) => {
	const res = await getCategoryFilterAPI(id).then(res => res.data);
	categoryData.value = res.result;
	breadList.value = [
		{
			id: nanoid(),
			name: res.result.parentName,
			path: `/category/${res.result.parentId}`
		},
		{
			id: nanoid(),
			name: res.result.name,
			path: `/category/sub/${route.params.id}`
		}
	]
}


onMounted(() => {
	getCategoryFilter(route.params.id);
})


</script>

<template>
	<div class="container ">
		<!-- 面包屑 -->
		<Bread :breadList="breadList" />
		<SubCategoryTabs />
	</div>
</template>

<style scoped lang="scss"></style>